<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物训练 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/service-page.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="services.html" class="nav-link active">服务预约</a>
                <a href="orders.html" class="nav-link">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="pets.html" class="nav-link">
                    <i class="fas fa-dog"></i> 我的宠物
                </a>
                <span class="user-name">张三</span>
            </div>
        </div>
    </header>

    <main class="main">
        <section class="service-hero training">
            <div class="container">
                <h1>宠物训练</h1>
                <p>专业训练师一对一指导，培养宠物良好行为习惯，解决您的烦恼。</p>
            </div>
        </section>

        <div class="container service-layout">
            <div class="service-details">
                <h2><i class="fas fa-graduation-cap"></i> 服务内容</h2>
                <p>我们的训练课程科学、正向，旨在建立您和宠物之间更深厚的信任关系。</p>
                <div class="feature-list">
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>基础服从训练</h4><p>如"坐下"、"等待"、"前来"等基础指令。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>行为问题纠正</h4><p>针对乱叫、护食、随地大小便等不良习惯进行纠正。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>社交能力培养</h4><p>学习如何与其他宠物和人类友好相处。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>趣味技能学习</h4><p>如握手、转圈、装死等，增加互动乐趣。</p></div></div>
                </div>

                <h2><i class="fas fa-tags"></i> 价格套餐</h2>
                <div class="pricing-table">
                    <div class="pricing-option"><h4>体验课</h4><p>1课时</p><div class="price">¥158</div></div>
                    <div class="pricing-option active"><h4>标准课程</h4><p>5课时</p><div class="price">¥698</div></div>
                    <div class="pricing-option"><h4>高级课程</h4><p>10课时</p><div class="price">¥1288</div></div>
                </div>
            </div>

            <div class="booking-form-container">
                <div class="booking-form">
                    <h2>立即预约</h2>
                    <form onsubmit="return false;">
                        <div class="form-group"><label>选择宠物</label><select required><option value="">请选择</option><option>旺财 (狗狗)</option></select></div>
                        <div class="form-group"><label>期望开始日期</label><input type="date" required></div>
                        <div class="form-group"><label>期望上课时间</label><select required><option value="">请选择</option><option>工作日</option><option>周末</option></select></div>
                        <div class="form-group"><label>训练地址</label><select required><option value="">请选择</option><option>家庭地址1</option></select></div>
                        <div class="form-group"><label>主要训练目标</label><textarea rows="2"></textarea></div>
                        <button type="submit" class="btn btn-primary btn-large">确认预约</button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <a href="services.html" class="back-to-services">
        <i class="fas fa-arrow-left"></i>
    </a>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 加载宠物列表
        petHouseAPI.pets.getAll().then(res => {
            const pets = res.data || [];
            const petSelect = document.querySelector('select[required]');
            if (petSelect) {
                petSelect.innerHTML = '<option value="">请选择</option>' +
                    pets.map(p => `<option value="${p.id}">${p.name} (${p.type})</option>`).join('');
            }
        });
        // 2. 加载地址列表
        if (petHouseAPI.address && petHouseAPI.address.getAll) {
            petHouseAPI.address.getAll().then(res => {
                const addresses = res.data || [];
                const addrSelect = document.querySelectorAll('select');
                addrSelect.forEach(select => {
                    if (select.previousElementSibling && select.previousElementSibling.textContent.includes('地址')) {
                        select.innerHTML = '<option value="">请选择</option>' +
                            addresses.map(a => `<option value="${a.id}">${a.province}${a.city}${a.district}${a.detailAddress}</option>`).join('');
                    }
                });
            });
        }
        // 3. 价格套餐可选
        const pricingOptions = document.querySelectorAll('.pricing-option');
        pricingOptions.forEach(option => {
            option.addEventListener('click', function() {
                pricingOptions.forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
            });
        });
    });
    </script>
</body>
</html> 